<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>



<body>
    <div id="app1">
        <component-a></component-a>
        <component-b></component-b>
    </div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <!-- var Event = new Vue({})
    兄弟组件之间的信息传输   跨页面之间的数据传输 
 Event.$emit('msg',this.msg);　　　   发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置；
 Event.$on('msg',function(msg));  接受数据 第一个参数是接受数据的名称，第二个是对参数触发的函数   -->

<script>
       let bus = new Vue()
       let componentA = {
           template: '<button v-on:click="aa">button1</button>',
           data() {
               return {
                   msg:0,
               }
           },
           methods: {
               aa() {
                   bus.$emit('aa',this.msg++);
               }
           }
       }
       let componentB = {
           template: "<button>button2</button>",
           mounted() {
               bus.$on('aa',function(text) {
                  console.log('我是有组件1传过来的:'+text);
               })
           },
       }   
       let app1 = new Vue({
           el:'#app1',
           components: {
                componentA,
                componentB

           }
       })
</script>
</html>